<template>
  <div id="container">
    <div style="text-align:center;">
      <h3>教师授课意向表添加</h3>
    </div>
    <hr />
    <div id="teachingIntention_ruleForm" style="margin:auto;text-align:center;width:80%">
      <el-form
        :model="teachingIntention_ruleForm"
        status-icon
        :rules="rules"
        ref="teachingIntention_ruleForm"
        inline-message
        class="demo-ruleForm"
      >
        <el-form-item prop="teacherId">
          <span class="title">教职工工号：</span>
          <el-button type="text" disabled>
            <span
              v-if="teachingIntention_ruleForm.teacherId"
            >{{teachingIntention_ruleForm.teacherId}}</span>
            <span v-else>未选择</span>
          </el-button>
        </el-form-item>
        <el-form-item prop="teacherName">
          <span class="title">教师名称：</span>
          <el-button type="text" disabled>
            <span
              v-if="teachingIntention_ruleForm.teacherName"
            >{{teachingIntention_ruleForm.teacherName}}</span>
            <span v-else>未选择</span>
          </el-button>
        </el-form-item>
        <el-form-item prop="semester">
          <span class="title">学期：</span>
          <el-button type="text" @click.native="openSemesterList = true">
            <span v-if="teachingIntention_ruleForm.semester">{{teachingIntention_ruleForm.semester}}</span>
            <span v-else>未选择</span>
          </el-button>
        </el-form-item>
        <el-form-item prop="className">
          <span class="title">班级：</span>
          <el-button type="text" @click.native="openClassList = true">
            <span
              v-if="teachingIntention_ruleForm.className"
            >{{teachingIntention_ruleForm.className}}</span>
            <span v-else>未选择</span>
          </el-button>
        </el-form-item>
        <el-form-item prop="courseName">
          <span class="title">课程：</span>
          <el-button type="text" @click.native="openCourseList = true">
            <span
              v-if="teachingIntention_ruleForm.courseName"
            >{{teachingIntention_ruleForm.courseName}}</span>
            <span v-else>未选择</span>
          </el-button>
        </el-form-item>
        <el-form-item>
          <span style="width:80%;text-align:center;">
            <el-button type="primary" @click="submitForm('teachingIntention_ruleForm')">提交</el-button>
            <el-button type="primary" @click="resetForm('teachingIntention_ruleForm')">重置</el-button>
          </span>
        </el-form-item>
      </el-form>
    </div>
    <div>
      <!-- 学期筛选 -->
      <el-dialog title="选择学期" :visible.sync="openSemesterList">
        <el-input placeholder="请输入关键字" v-model="semesterKeyword">
          <template slot="prepend">学期名</template>
          <el-button slot="append" icon="el-icon-search" @click="getSemesterByKeyword"></el-button>
        </el-input>
        <br />
        <br />
        <el-radio-group v-model="semesterSelect">
          <el-radio
            v-for="(semester, index) in semesterList"
            :key="'semester' + index"
            :label="semester"
          >{{ semester.name }}</el-radio>
        </el-radio-group>
        <div slot="footer" class="dialog-footer">
          <el-button
            @click="
              (teachingIntention_ruleForm.semester = ''), (semesterSelect = '')
            "
          >清 空</el-button>
          <el-button type="primary" @click="semesterSelected">确 定</el-button>
        </div>
      </el-dialog>
      <!-- 班级筛选 -->
      <el-dialog title="选择班级" :visible.sync="openClassList">
        <el-input placeholder="请输入关键字" v-model="classKeyword">
          <template slot="prepend">班级名</template>
          <el-button slot="append" icon="el-icon-search" @click="getClassByKeyword"></el-button>
        </el-input>
        <br />
        <br />
        <el-radio-group v-model="classSelect">
          <el-radio
            v-for="(classItem, index) in classList"
            :key="'class' + index"
            :label="classItem"
          >{{ classItem.name }}</el-radio>
        </el-radio-group>
        <div slot="footer" class="dialog-footer">
          <el-button
            @click="
              (teachingIntention_ruleForm.className = ''), (classSelect = '')
            "
          >清 空</el-button>
          <el-button type="primary" @click="classSelected">确 定</el-button>
        </div>
      </el-dialog>
      <!-- 课程筛选 -->
      <el-dialog title="选择课程" :visible.sync="openCourseList">
        <el-input placeholder="请输入关键字" v-model="courseKeyword">
          <template slot="prepend">课程名</template>
          <el-button slot="append" icon="el-icon-search" @click="getCourseByKeyword"></el-button>
        </el-input>
        <br />
        <br />
        <el-radio-group v-model="courseSelect">
          <el-radio
            v-for="(course, index) in courseList"
            :key="'course' + index"
            :label="course"
          >{{ course.name }}</el-radio>
        </el-radio-group>
        <div slot="footer" class="dialog-footer">
          <el-button
            @click="
              (teachingIntention_ruleForm.courseName = ''), (courseSelect = '')
            "
          >清 空</el-button>
          <el-button type="primary" @click="courseSelected">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import { getAllSemester } from "@/api/semester";
import { getAllInstructionClass } from "@/api/instructionClass";
import { getAllCourse } from "@/api/course";
import semester from "../../../../mock/semester";

export default {
  name: "teachingIntention_add",
  data() {
    return {
      semesterKeyword: "", //学期筛选关键词
      openSemesterList: false, //学期筛选对话框显示
      semesterList: [], //学期选择列表
      semesterSelect: "", //选择的学期

      classKeyword: "", //班级筛选关键词
      openClassList: false, //班级筛选对话框显示
      classList: [], //班级选择列表
      classSelect: "", //选择的班级

      courseKeyword: "", //课程筛选关键词
      openCourseList: false, //课程筛选对话框显示
      courseList: [], //课程选择列表
      courseSelect: "", //选择的课程

      //表单数据
      teachingIntention_ruleForm: {
        teacherId: localStorage.getItem("userid"), //教职本人工号
        teacherName: localStorage.getItem("username"), //教师本人名称
        semester: "", //当前学期
        className: "", //班级
        courseName: "" //课程
      },
      rules: {
        teacherId: [
          { required: true, message: "请输入教职工工号", trigger: "submit" }
        ],
        teacherName: [
          { required: true, message: "请输入教职工名称", trigger: "submit" }
        ],
        semester: [
          { required: true, message: "请输入学期", trigger: "submit" }
        ],
        className: [
          { required: true, message: "请输入班级名称", trigger: "submit" }
        ],
        courseName: [
          { required: true, message: "请输入课程名称", trigger: "submit" }
        ]
      }
    };
  },
  created() {
    // 获取学期列表
    this.getAllSemester();
    //获取课程列表
    this.getAllCourse();
    //获取班级列表
    this.getAllInstructionClass();
  },
  methods: {
    //确定选择学期，获取选择数据，关闭对话框
    semesterSelected() {
      if (this.semesterSelect) {
        this.teachingIntention_ruleForm.semester = this.semesterSelect.name;
      }
      this.openSemesterList = false;
    },

    //确定选择班级，获取数据，关闭对话框
    classSelected() {
      if (this.classSelect) {
        this.teachingIntention_ruleForm.className = this.classSelect.name;
      }
      this.openClassList = false;
    },

    //确定选择课程，获取数据，关闭对话框
    courseSelected() {
      if (this.courseSelect) {
        this.teachingIntention_ruleForm.courseName = this.courseSelect.name;
      }
      this.openCourseList = false;
    },

    //根据关键词搜索学期
    getSemesterByKeyword() {},

    //根据关键词搜索班级
    getClassByKeyword() {},

    //根据关键词搜索课程
    getCourseByKeyword() {},

    // 获取学期列表
    getAllSemester() {
      getAllSemester().then(res => {
        this.semesterList = res.data.semesterList;
      });
    },

    //获取课程列表
    getAllCourse() {
      getAllCourse().then(res => {
        this.courseList = res.data.courseList;
      });
    },

    //获取班级列表
    getAllInstructionClass() {
      getAllInstructionClass().then(res => {
        this.classList = res.data.instructionClassList;
      });
    },

    //教师授课意向表表单提交
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },

    //表单重置
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }
};
</script>
<style scoped>
#container {
  width: 80%;
  margin: auto;
  font-size: 20px;
}
.el-form-item {
  height: 50px;
  line-height: 50px;
}
.title {
  display: inline-block;
  width: 150px;
  font-size: 20px;
  text-align: right;
}
.el-button span {
  display: inline-block;
  font-size: 20px;
  width: 300px;
  text-align: left;
}
</style>

